{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-review" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid"> {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-review" class="form-horizontal">
          <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-author">{{ entry_author }}</label>
            <div class="col-sm-10">
              <div class="form-control">{{ customer_name }}</div>
            </div>
          </div>
          <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-product">{{ entry_product }}</label>
            <div class="col-sm-10">
              <div class="form-control">{{ product_name }}</div>
            </div>
          </div>
          <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-text">{{ entry_text }}</label>
            <div class="col-sm-10">
              <textarea name="comments" cols="60" rows="8" placeholder="{{ entry_text }}" id="input-text" class="form-control">{{ comments }}</textarea>
              {% if error_text %}
              <div class="text-danger">{{ error_text }}</div>
              {% endif %} </div>
          </div>
          <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-name">{{ entry_rating }}</label>
            <div class="col-sm-10">
              <label class="radio-inline"> {% if rating == 1 %}
                <input type="radio" name="rating" value="1" checked="checked" />
                1
                {% else %}
                <input type="radio" name="rating" value="1" />
                1
                {% endif %} </label>
              <label class="radio-inline"> {% if rating == 2 %}
                <input type="radio" name="rating" value="2" checked="checked" />
                2
                {% else %}
                <input type="radio" name="rating" value="2" />
                2
                {% endif %} </label>
              <label class="radio-inline"> {% if rating == 3 %}
                <input type="radio" name="rating" value="3" checked="checked" />
                3
                {% else %}
                <input type="radio" name="rating" value="3" />
                3
                {% endif %} </label>
              <label class="radio-inline"> {% if rating == 4 %}
                <input type="radio" name="rating" value="4" checked="checked" />
                4
                {% else %}
                <input type="radio" name="rating" value="4" />
                4
                {% endif %} </label>
              <label class="radio-inline"> {% if rating == 5 %}
                <input type="radio" name="rating" value="5" checked="checked" />
                5
                {% else %}
                <input type="radio" name="rating" value="5" />
                5
                {% endif %} </label>
              {% if error_rating %}
              <div class="text-danger">{{ error_rating }}</div>
              {% endif %} </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-images">{{ entry_images }}</label>
            <div class="col-sm-10">
              <div class="container-fluid">
                <div class="row" id="review-img">
                  {% for image in images %}
                    <div class="col-sm-2 review-item">
                      <div class="review-img-item">
                        <img src="{{ image.image }}" class="img-responsive"/>
                        <input type="hidden" name="images[]" value="{{ image.src }}">
                        <i class="fa fa-remove delete"></i>
                      </div>
                    </div>
                  {% endfor %}
                  <div class="col-sm-2" id="upload-image-content">
                    <div class="review-img-item" id="comment-upload" style="width: 110px; height: 110px;cursor: pointer;">
                      <img src="view/image/add-image.png" class="img-responsive"/>
                    </div>
                  </div>
                  <input type="file" name="comment-file" id="comment-file" class="comment-upload" style="display: none;"/>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
            <div class="col-sm-10">
              <select name="status" id="input-status" class="form-control">
                {% if status %}
                  <option value="1" selected="selected">{{ text_enabled }}</option>
                  <option value="0">{{ text_disabled }}</option>
                {% else %}
                  <option value="1">{{ text_enabled }}</option>
                  <option value="0" selected="selected">{{ text_disabled }}</option>
                {% endif %}
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).on('click', '.review-img-item .delete', function () {
    var $this = $(this);
    var alert_layer = layer.confirm('{{ text_delete_confirm }}', {
      btn: ['{{ text_btn_confirm }}','{{ text_btn_cancel }}']
    }, function(){
      layer.close(alert_layer);
      $this.parent('.review-img-item').parent('.review-item').remove();
    }, function(){});
  });
  // Upload image
  $(document).on('click', '#comment-upload', function () {
    $('.comment-upload').click();
  });

  $(document).on('change', '.comment-upload', function () {
    var $this = $(this);
    var file = $this.val();
    if (file) {
      var id = $(this).attr('id') + Date.parse(new Date());
      uploadComment($this.attr('id'));
      $('.comment-upload').remove();
      $('#review-img').append('<input class="comment-upload" type="file" name="' + id + '" id="' + id + '" style="display: none;">');
    }
  });

  function uploadComment(id) {
    var load_index = layer.load(2, {
      shade: [0.1,'#000']
    });
    $.ajaxFileUpload({
      url: 'index.php?route=catalog/review/upload&user_token={{ user_token }}&customer_id={{ customer_id }}',
      type: 'post',
      secureuri: false,
      fileElementId: id,
      dataType: 'json',
      success: function(json) {
        layer.close(load_index);
        var code = json['code'];
        if (code) {
          var image_html = '';
          image_html += '<div class="col-sm-2 review-item">';
          image_html += '<div class="review-img-item">';
          image_html += '<img src="' + json['image'] + '" class="img-responsive">';
          image_html += '<i class="fa fa-remove delete"></i>';
          image_html += '<input type="hidden" name="images[]" value="' + json['url'] + '">';
          image_html += '</div>';
          image_html += '</div>';
          $('#upload-image-content').before(image_html);
        } else {
          layer.msg(json['msg']);
        }
      },
      error: function(data, status, e) {
        console.log(e);
      }
    });
  }
</script>
{{ footer }}